<template>
    <el-row :gutter="20">
        <el-col :span="6" :xs="24">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>个人中心</span>
                    </div>
                </template>
                <div>
                    <div class="text-center">
                        <el-avatar :size="100" :src="require('../../assets/image/default_head.png')" />
                    </div>
                    <ul class="list-group list-group-striped">
                        <li class="list-group-item">
                            <i class="iconfont icon-yonghuming"></i>用户名称
                            <div class="pull-right">{{ state.user.username }}</div>
                        </li>
                        <li class="list-group-item">
                            <i class="iconfont icon-yonghunicheng"></i>用户昵称
                            <div class="pull-right">{{ state.user.nickName }}</div>
                        </li>
                        <li class="list-group-item">
                            <i class="iconfont icon-shoujihaoma"></i>手机号码
                            <div class="pull-right">{{ state.user.phoneNumber }}</div>
                        </li>
                        <li class="list-group-item">
                            <i class="iconfont icon-youxiang"></i>用户邮箱
                            <div class="pull-right">{{ state.user.email }}</div>
                        </li>
                        <li class="list-group-item">
                            <i class="iconfont icon-zhanghaoleixing"></i>账号类型
                            <div class="pull-right">{{ state.user.registerType }}</div>
                        </li>
                        <li class="list-group-item">
                            <i class="iconfont icon-riqi1"></i>创建日期
                            <div class="pull-right">{{ parseTime(state.user.createTime) }}</div>
                        </li>
                    </ul>
                </div>
            </el-card>
        </el-col>
        <el-col :span="18" :xs="24">
            <el-card>
                <template #header>
                    <div class="clearfix">
                        <span>基本资料</span>
                    </div>
                </template>
                <el-tabs v-model="activeTab" class="per_tabs">
                    <el-tab-pane label="用户资料" name="userinfo">
                        <userInfo :user="userForm"/>
                    </el-tab-pane>
                    <el-tab-pane label="修改密码" name="resetPwd">
                        <updatePassword :username="userForm.username"/>
                    </el-tab-pane>
                    <el-tab-pane label="第三方应用" name="thirdParty">
                    
                    </el-tab-pane>
                    <el-tab-pane label="在线设备" name="onlineDevice">
                    
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup>
import {errorMsg, successMsg} from "../../utils/message";
import {onMounted, ref, reactive} from "vue";
import {parseTime} from "../../utils/common";
import {getUserInfo} from "../../api/user/sysUser";
import userInfo from "./profile/userInfo";
import updatePassword from "./profile/updatePassword.vue";

//  属性赋值
const state = reactive({
    user: {}
})

//  设置el-tabs默认选中页签
const activeTab = ref('userinfo');
//  用户信息组件传递用户信息
const userForm = ref({});

const getUser = () => {
    getUserInfo().then(res => {
        if (res.code == 200){
            state.user = res.data
            userForm.value = {...res.data}
        }else{
            errorMsg(res.message)
        }
    })
}

onMounted(()=>{
    getUser()
})
</script>

<style scoped>
.text-center{
    text-align: center;
}
.list-group{
    padding-left: 0;
    list-style: none
}
.list-group-striped>.list-group-item{
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}
.list-group-item{
    border-bottom: 1px solid #e7eaec;
    border-top: 1px solid #e7eaec;
    margin-bottom: -1px;
    padding: 11px 0;
    font-size: 13px;
}
.pull-right{
    float: right;
}

/** 重置el-tabs样式 */
.per_tabs :deep(.el-tabs:deep) {
    /* 设置默认样式 */
    border: none;
    background-color: initial;
}

.per_tabs :deep(.el-tabs__nav-wrap) {
    border-top: initial;
    border-bottom: initial;
    background-color: initial;
}

.per_tabs :deep(.el-tabs__item) {
    height: auto;
    line-height: normal;
    width: initial;
}

.per_tabs :deep(.el-tabs__item.is-active) {
    background-color: initial;
    border-color: initial;
    color: initial;
}

.per_tabs :deep(.el-tabs__item.is-active::before) {
    background-color: initial;
    width: initial;
}
</style>